﻿@import "../../core/less/import.less";
@tab-pre: ~"@{ui}-tab";

.@{tab-pre} {
    width: 100%;
    overflow: hidden;

    &-nav {
        .ut-clearfix;
        border-bottom: 1px solid @color-border-deep;

        .@{tab-pre}-nav-item {
            font-size: 14px;
            padding: 0 24px;
            margin-right: 24px;
            margin-bottom: -1px;
            border-bottom: 2px solid transparent;
            float: left;
            position: relative;
            cursor: pointer;
            .middle-vertical(32px);
            .transition(all .3s ease);


            &:hover {
                color: @color-primary;
            }

            .@{ui}-icon {
                vertical-align: middle;
                margin-right: 4px;
            }
        }

        .@{tab-pre}-nav-active {
            color: @color-primary;
            border-color: @color-primary;
        }

        .@{tab-pre}-disabled {
            color: @color-disabled;
            cursor: default;

            &:hover {
                color: @color-disabled;
            }
        }
    }

    &-content {
        display: flex;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -webkit-flex-direction: row;
        -ms-flex-direction: row;
        flex-direction: row;
        will-change: margin-left;
        .transition(margin-left 0.3s cubic-bezier(0.645, 0.045, 0.355, 1));

        .@{tab-pre}-content-item {
            width: 100%;
            padding: 20px 0;
            flex-shrink: 0;
            width: 100%;
            .transition(opacity 0.3s);
            .opacity(0);
        }

        .@{tab-pre}-content-active {
            .opacity(1);
        }
    }

    &-card {
        .@{tab-pre}-nav-item {
            border: 1px solid @color-border-deep;
            border-width: 1px;
            border-radius: 4px 4px 0 0;
            background-color: @color-background-normal;
            margin-right: 5px;
        }

        .@{tab-pre}-nav-active {
            color: @color;
            background-color: @color-primary;
            border-color:@color-primary;
            &:hover {
                color: @color;
            }
        }
    }
}
